<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport"
			content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
		<title>餐费详情</title>

		<!-- 引入样式文件 -->
		<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@4/lib/index.css" /> -->
		<link rel="stylesheet" href="/wechat/css/vantIndex.css">

		<!-- 自定义样式 -->
		<style>
			body {
				background-color: #f3f3f3;
				overflow: hidden;
				font-size: 10px;
			}

			#app {

			}
			.content-div {
				background-color: #fff;
				margin: 1rem;
				border-radius: 20px;
				box-shadow: 0 5px #e6e6e6;
			}

			.filter-div {
				text-align: center;
				display: flex;
				justify-content: center;
				padding: 0.6rem 0.7rem;
				color: #000;
				font-weight: bold;
				border-top-left-radius: 10px;
				border-top-right-radius: 10px;
				background-color: #fec327;
				font-size: 0.8rem;
			}
			.educational-head {
				width: 85%;
			}
			.content-box {
				display: block;
				overflow: auto;
				height: 35rem;
			}
			.title {
				color: #1b1615;
				font-size: 0.6rem;
				height: 34px;
				line-height: 34px;
				
			}
			.van-col {
				text-align: center;
/* 				div {
					line-height: 40px;
				} */
			}
			.title-name {
				font-size: 1rem;
				color: #000;
				text-align: left;
					text-indent: 2rem;
			}
			.unpaid-div {
				font-size: 0.8rem;
				text-align: left;
				text-indent: 2rem;
				color: #2184fe;
				div {
					margin-left: 4px;
					color: #fec327;
					display: inline-block;
					text-align: left;
					b {
						color: #000;
						margin-right: 10px;
					}
				}
			}
			.meals-c {
				border-radius: 10px; padding: 0.8rem 1.5rem; margin: 1px 0; background-color: #ffedbd; font-size: 0.8rem;
				.van-col {
					height: 30px;
					line-height: 30px;
					text-align: center;
				}
			}
			
			.backtn-div {
				font-size: 1.4rem;
				padding: 0.4rem 0.6rem;
				background-color: #ffc526;
			}
		</style>
	</head>

	<body style="font-size: 10px;">
		<div id="app">
			
			<div class="backtn-div">
				<van-icon name="arrow-left" @click="goBack" />
			</div>
			<van-row type="flex" justify="left" style="margin-top: 1.8rem; margin-bottom: 0.4rem;">
				<van-col span="16" >
					<div class="title-name">学生姓名: {{OjbList.name}}</div>
				</van-col> 
			</van-row>
			<van-row type="flex" justify="left">
				<van-col span="16" >
					<div class="unpaid-div">未收费数量 <div>午餐: <b>{{unpaidLunchCount}}</b>   晚餐: <b>{{unpaidDinnerCount}}</b></div></div>
				</van-col> 
			</van-row>
			<div class="content-div">
				<div class="filter-div">
					<div class="educational-head" >
						<van-row type="flex" justify="space-around">
							<van-col span="6">
								日期
							</van-col> 
							<van-col span="9">
								午餐
							</van-col> 
							<van-col span="9">
								晚餐
							</van-col> 
						</van-row>
					</div>
				</div>
				<div class="content-box">
					<!-- <van-pull-refresh v-model="refreshing" @refresh="onRefresh" > -->
					<van-list
					  v-model:loading="loading"
					  :finished="finished"
					  finished-text="没有更多了"
					  @load="onToLoad"
					>
					  <van-cell v-for="(item, index) in list" :key="index" >
						<div class="meals-c">  
						<van-row type="flex" justify="space-around">
							<van-col span="6" >
								<div >{{item.date}}</div>
							</van-col> 
							<van-col span="9" style="display: flex;">
								 <div v-if="item.lunchId === null" style="width: 100%;">未报餐</div>
								 <div v-else style="padding-top: 0.1rem; ">
									 <van-switch size="22px" @change="mealCharge(item, 1)"  v-model="item.lunchCharge"  inactive-color="#dcdee0" />	 
								 </div>
								 <div v-if="item.lunchId !== null" style="margin-left: 4px; ">
									<div v-if="item.lunchCharge == true">已收款</div><div v-else>未收款</div>
								 </div>
								<!-- <div class="title">{{item.lunchCharge}}</div> -->
							</van-col> 
							<van-col span="9" style="display: flex;">
								<div v-if="item.dinnerId === null" style="width: 100%;">未报餐</div>
								<div v-else style="padding-top: 0.1rem;">
									 <van-switch size="22px" @change="mealCharge(item, 2)"   v-model="item.dinnerCharge"  inactive-color="#dcdee0" />
								</div>
								<div v-if="item.dinnerId !== null" style="margin-left: 4px; ">
									<div v-if="item.dinnerCharge == true">已收款</div><div v-else>未收款</div>
								 </div>
								<!-- <div class="title">{{item.totalLunch}}</div> -->
							</van-col> 
						</van-row>
						</div>
					  </van-cell>
					</van-list>
					<!-- </van-pull-refresh> -->
				</div>
			</div>
		</div>

		<!-- 引入 Vue 和 Vant 的 JS 文件 -->
		<script src="/wechat/js/vue@3.js"></script>
		<script src="/wechat/js/vant.min.js"></script>
	
<!-- 		<script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
		<script src="https://cdn.jsdelivr.net/npm/vant@4/lib/vant.min.js"></script> -->
		<script src="/scriptZIP/axios.min.js"></script>
		<script src="/scriptZIP/qs.min.js"></script>
		<script src="/js/common.js"></script>


		<script>
			
			// 初始化 Vue 实例
			const app = Vue.createApp({
				data() {
					return {
						searchValue: '',
						loading: true,
						finished: false,
						list: [],
						schoolId: '',
						refreshing: false,
						pageNum: 1,
						pageSize: 10,
						OjbList: {},
						studentId: '',
						student: {}, // 动态获取学生信息
						lunch: [], // 午餐数据
						dinner: [], // 晚餐数据
					};
				},
				created: function () {
					this.schoolId = localStorage.getItem('schoolId');
					this.studentId = params().studentId;
					this.getList()

				},
				computed: {
				    paidLunchCount() {
				        return this.lunch.filter(item => item.charge).length;
				    },
				    unpaidLunchCount() {
				        return this.lunch.filter(item => !item.charge).length;
				    },
				    paidDinnerCount() {
				        return this.dinner.filter(item => item.charge).length;
				    },
				    unpaidDinnerCount() {
				        return this.dinner.filter(item => !item.charge).length;
				    },
				},
				methods: {
					mealCharge (item, num) {
						let formData = {
							"id": num == 1 ? item.lunchId : item.dinnerId, 
							"charge": num == 1 ? item.lunchCharge : item.dinnerCharge
						}
						axios.post('/t/mealReservation/updateMealCharge', formData).then(function (res) { }.bind(this));
						
						// this.getList()
					},
					goBack() {
						history.back();
					},
					mealRecords() {
					    // 收集所有的日期
					    const allDates = [...new Set([...this.lunch.map(l => l.date), ...this.dinner.map(d => d.date)])]
					        .sort((a, b) => new Date(b) - new Date(a)); // 按日期倒序排序
					
					    // 根据日期生成完整的记录
					    this.list = allDates.map(date => {
					        const lunchRecord = this.lunch.find(l => l.date === date) || {};
					        const dinnerRecord = this.dinner.find(d => d.date === date) || {};
					        return {
					            date,
					            lunchCharge: lunchRecord.charge || false,
					            lunchId: lunchRecord.id || null,
					            dinnerCharge: dinnerRecord.charge || false,
					            dinnerId: dinnerRecord.id || null,
					        };
					    });
					},
					filterclick(st) {
						this.studentStatus = st;
						this.list = []
						this.pageNum = 1
						 // this.finished = false;
						this.getList()
					},
					onToLoad() {
						this.loading = true;
						  setTimeout(() => {
							// if (this.refreshing) {
							//   this.list = [];
							//   this.refreshing = false;
							// }
							// this.refreshing = false;
							// for (let i = 0; i < 10; i++) {
							//   this.list.push(this.list.length + 1);
							// }
							this.loading = false;
							  this.finished = true;
							// this.pageNum += 1;
							// this.pageNum += 1;

							this.getList()
					
					// 		if (this.list.length >= 40) {
					// 		  finished.value = true;
					// 		}
						  }, 1000);
					},
					onRefresh() {
						this.Loading = true;
						this.finished = false;
						this.pageNum = 1;
						this.list = [];
						this.onToLoad()
						
					},
					onSearch() {
						this.list = []
						this.refreshing = true
						this.pageNum = 1
						this.getList()
					},
					getList() {
						axios.get('/t/mealReservation/studentMeal/' + this.studentId).then(function (res) {
							// this.OjbList = res.data
							//  res.data.list.forEach(item => {
							// 	this.list.push(item)
							// });
							this.OjbList = res.data
							this.student = {
							    schoolName: res.data.schoolName,
							    name: res.data.name,
							};
							this.lunch = res.data.lunch;
							this.dinner = res.data.dinner;
							this.mealRecords()
							
							this.loading = false;
							this.finished = true;
							// if (this.list.length >= this.OjbList.total) {
							//   this.finished = true; // 没有更多数据了
							// } else {
							//   this.finished = false;
							//   this.pageNum++;
							// }
							 // this.finished = true; // 没有更多数据了
							// console.log('33344', this.list.length, res.data.total)
							// if (this.list.length >= res.data.total) {
							//   this.finished = true; // 没有更多数据了
							// } else {
							//   this.pageNum += 1;
							//   }
						}.bind(this));
					},
					enterShop() {
						vant.Toast("进入店铺");
					},

				},
			});

			app.use(vant);
			app.mount("#app");
		</script>
	</body>
</html>